<template>
  <div class="contain">
    <van-cell-group class="login">
      <van-field v-model="userName" label="用户名" placeholder="请输入" />
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入"
      />
      <van-field v-model="checkCode" label="校验码" placeholder="请输入" />
    </van-cell-group>
    <van-row gutter="20" class="van-row" type="flex" justify="center">
      <van-col span="10">
        <van-button
          text="忘记密码"
          plain
          color="red"
          size="large"
          type="info"
          @click="jump('/checkWord')"
        ></van-button>
      </van-col>
      <van-col span="10">
        <van-button
          text="确定"
          size="large"
          type="info"
          @click="login()"
        ></van-button>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { Toast } from "vant";
import helper from "../../service/helper.js";
import parameter from "../../service/state.js";
export default {
  data() {
    return {
      userName: "admin123",
      password: "abcd1234",
      checkCode: "111111",
    };
  },
  components: {},
  methods: {
    login() {
      var loginInfo = {
        userName: this.userName,
        password: this.password,
        checkCode: this.checkCode,
      };
      //校验
      var flag = this.reg(loginInfo);
      if (flag) {
        // this.jump("/index", loginInfo);
        this.jump("/monopoly4");
      }
    },
    jump(url, data) {
      if (url && url == "-1") {
        this.$router.back(-1);
      } else {
        this.$router.push({ path: url, query: data });
      }
    },
    reg(loginInfo) {
      //用户名正则
      var nameReg = /^[\w\u4e00-\u9fa5]{6,12}$/;
      var objExpNameReg = new RegExp(nameReg);
      //密码正则
      var passwordReg = /^[a-z0-9_-]{6,18}$/;
      var objExpPasswordReg = new RegExp(passwordReg);
      //校验码正则
      var codeReg = /^[a-z0-9]{6}$/;
      var objExpCodeReg = new RegExp(codeReg);
      //用户名提示文本
      var nameRegMessage = "用户名必须为6-12位字母/数字/中文";
      //密码提示文本
      var passwordRegMessage = "密码可以使用a-z,0-9, '-','_',最低三位,最高9位";
      //校验码提示文本
      var codeRegMessage = "校验码不正确";

      //非空校验
      if (!loginInfo.userName) {
        Toast("请输入用户名");
        return false;
      } else if (!loginInfo.password) {
        Toast("请输入密码");
        return false;
      } else if (!loginInfo.checkCode) {
        Toast("请输入校验码");
        return false;
      }
      //正则校验
      if (!objExpNameReg.test(loginInfo.userName)) {
        Toast(nameRegMessage);
        return false;
      } else if (!objExpPasswordReg.test(loginInfo.password)) {
        Toast(passwordRegMessage);
        return false;
      } else if (!objExpCodeReg.test(loginInfo.checkCode)) {
        Toast(codeRegMessage);
        return false;
      }
      //接口校验
      console.log("进入接口校验");
      localStorage.setItem("token", JSON.stringify(loginInfo));
      return true;
    },
  },
  watch: {},
  mounted() {},
};
</script>
<style scoped lang="less">
.contain {
  max-width: 400px;
  margin: 10px auto;
  border: 1px solid black;
}
.van-row {
  margin: 20px 0;
}
</style>
